/*
 * @Author: cygao
 * @Date: 2018-11-09 13:58:25
 * @Last Modified by: cygao
 * @Last Modified time: 2018-11-25 22:46:57
 */

import React, { Component }   from 'react';
import { 
    login, 
    verifyCode,
    wechatLogin,
    qqLogin,
}                             from '../../../api/home';
import './login.less';
import Utils                  from '../../../utils';

export default class Login extends Component {
    constructor() {
        super()
        this.state = {
            username: '',
            type: false,
            code: '',
            countdown: false,
            time: 60
        }
        this.authLogin = this.authLogin.bind(this);
    }
    changeHandle(e) {
        this.setState({
          username: e.target.value
        })
    }
    changeCode(e) {
        this.setState({
          code: e.target.value
        })
    }
    changeType() {
        this.setState({
            // type : !this.state.type
            type: false
        })
    }
    getCode() {
        verifyCode({
            phone: this.state.username,
            action: 'login'
        }).then(resp=>{
            if(resp.ret < 0){
                alert(resp.msg)
            }else{
                this.setState({
                    countdown: true
                })
                let timer = setInterval(() => {
                    this.setState({
                        time: this.state.time-1
                    }, () => {
                        if(this.state.time === 0){
                            clearInterval(timer);
                            this.setState({
                                countdown: false,
                                time: 60
                            })
                        }
                    })
                }, 1000)
                console.log('获取验证码')
            }
        })
    }
    clickLogin() {
        let clientid = Utils.getClientId();
        let param = {
            phone: this.state.username,
            sms_verify_code: this.state.code,
            clientid: clientid,
        }
        console.log("clickLogin: " + JSON.stringify(param));
        login(param).then(resp=>{
            if(resp.ret === 0){
                localStorage.setItem('token', resp.data.auth.access_token);
                localStorage.setItem('msgNum', resp.data.user_unread_messageCount);
                this.props.history.go(-1);
            }else{
                console.log(resp)
                alert(resp.msg)
            }        
        })
    }
    clickRegister() {
        this.props.history.push('/register');
        console.log('注册')
    }
    authLogin(type) {
        let clientid = Utils.getClientId();
        Utils.authLogin(type)
        .then((userInfo) => {
            console.log(JSON.stringify(userInfo));
            if (type == 'weixin') {
                wechatLogin({info: userInfo, clientid: clientid})
                .then((loginRes) => {
                    // console.log("wx login res:" + JSON.stringify(loginRes));
                    if (loginRes && loginRes.ret == 0) {
                        localStorage.setItem('token', loginRes.data.auth.access_token);
                        this.props.history.go(-1);
                    } else{
                        alert(loginRes.msg);
                    } 
                });
            } else {
                // qq 登陆
                // alert(JSON.stringify(userInfo));
                var openid = userInfo.target.authResult.openid;
                var qqUesrinfo = userInfo.target.userInfo;
                qqUesrinfo.openid = openid;
                var param = {
                    info: qqUesrinfo,
                    clientid: clientid,
                }
                qqLogin(param)
                .then((loginRes) => {
                    // console.log("qq login res:" + JSON.stringify(loginRes));
                    if (loginRes && loginRes.ret == 0) {
                        localStorage.setItem('token', loginRes.data.auth.access_token);
                        this.props.history.go(-1);
                    } else{
                        alert(loginRes.msg);
                    } 
                })
            }
        })
        .catch((e) => {
            // 授权失败
            console.log(JSON.stringify(e));
            alert(JSON.stringify(e));
        });
    }
    render() {
        return (
            <div id="login-container">
                <img className="login-bg" src={require('../../../static/images2/login-bg.png')} alt="" />
                <div className="login-input">
                    <img className="input-logo" src={require('../../../static/images2/logo-phone.png')} alt="" />
                    <input
                        type="text"
                        name="phoneNumber"
                        placeholder="请输入手机号码"
                        onChange={this.changeHandle.bind(this)}
                        value={this.state.username}
                    />
                </div>
                {   this.state.type ?
                    <div className="login-input mt-30">
                        <img className="input-logo" src={require('../../../static/images2/logo-code.png')} alt="" />
                        <input type="password" name="code" placeholder="请输入密码"/>
                    </div>
                    :
                    <div className="login-input mt-30">
                        <img className="input-logo" src={require('../../../static/images2/logo-code.png')} alt="" />
                        <input type="text" name="code" placeholder="请输入密码" value={this.state.code}  onChange={this.changeCode.bind(this)}/>
                        {
                            this.state.countdown ? 
                            <button className="countdown">{this.state.time} s</button>
                            :
                            <button className="input-code" onClick={this.getCode.bind(this)}>获取验证码</button>
                        }
                    </div>
                }
                {/* <button className="login-type-btn" onClick={this.changeType.bind(this)}>
                    {this.state.type ? '短信验证码登录' : '账号登录'}
                </button> */}
                <button className="login-btn" onClick={this.clickLogin.bind(this)}>登录</button>
                {/* <button className="login-btn register-btn" onClick={this.clickRegister.bind(this)}>注册</button> */}
                <div className="login-foot">
                    <div className="login-three">
                        <span className="line"></span>
                        <span className="txt">第三方账号登录</span>
                        <span className="line"></span>
                    </div>
                    <div className="three-list">
                        <div className="three-item" onClick={() => { this.authLogin('weixin'); }}>
                            <img className="item-logo" src={require('../../../static/images2/logo-wx.png')} alt="" />
                            <div className="item-text">微信登录</div>
                        </div>
                        <div className="three-item" onClick={() => { this.authLogin('qq'); }}>
                            <img className="item-logo1" src={require('../../../static/images2/logo-qq.png')} alt="" />
                            <div className="item-text">QQ登录</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
